---
import { type CollectionEntry, getCollection } from "astro:content";
import type { GetStaticPaths, Page } from "astro";
import { Icon } from "astro-icon/components";
import Note from "@/components/note/Note.astro";
import Pagination from "@/components/Paginator.astro";
import PageLayout from "@/layouts/Base.astro";

export const getStaticPaths = (async ({ paginate }) => {
	const MAX_MICRO_PER_PAGE = 10;

	// Get only Pleroma posts
	const allMicro = await getCollection("micro").catch(() => []); // Fallback to empty array if micro collection fails

	// Sort all micro posts
	const allMicroPosts = allMicro.sort(
		(a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime(),
	);

	return paginate(allMicroPosts, { pageSize: MAX_MICRO_PER_PAGE });
}) satisfies GetStaticPaths;

interface Props {
	page: Page<CollectionEntry<"micro">>;
	uniqueTags: string[];
}

const { page } = Astro.props;

const meta = {
	description: "Read my collection of micro posts",
	title: "Micro",
};

const paginationProps = {
	...(page.url.prev && {
		prevUrl: {
			text: "← Previous Page",
			url: page.url.prev,
		},
	}),
	...(page.url.next && {
		nextUrl: {
			text: "Next Page →",
			url: page.url.next,
		},
	}),
};
---

<PageLayout meta={meta}>
	<section>
		<h1 class="title mb-6 flex items-center gap-3">
			Micro <a class="text-accent" href="/micro/rss.xml" target="_blank">
				<span class="sr-only">RSS feed</span>
				<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:rss" />
			</a>
		</h1>
		<ul class="mt-6 space-y-8 text-start">
			{
				page.data.map((note) => (
					<li class="">
						<Note note={note} as="h2" isPreview />
					</li>
				))
			}
		</ul>
		<Pagination {...paginationProps} />
	</section>
</PageLayout>